/**
 * Created by zhouli on 18/1/17
 * Email li.zhou@huilianyi.com
 */
import React from 'react';
import { connect } from 'react-redux';
import {
  Input,
  Button,
  Icon,
  Tabs,
  Table,
  message,
  Modal,
  Popconfirm
} from 'antd';

import 'styles/setting/person-group/person-group-detail.scss';
import ListSelector from 'components/list-selector.js';
import BasicInfo from 'components/basic-info';
import { deepCopy, uniquelizeArray, messages } from 'share/common';
import RuleInfo from 'containers/setting/person-group/rule-info';
import chooserData from 'share/chooserData';
import menuRoute from 'routes/menuRoute';
import PGService from 'containers/setting/person-group/person-group.service';
import ResizeTable from 'components/resize-table';
import ImportModal from 'components/template/import-modal-ie/import-modal';
import config from 'config';

const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;

class PersonGroupDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      updateParams: {},
      updateState: false,
      saving: false,
      loading: true,
      edit: false, // 顶部的信息是否正在编辑
      infoData: {}, // 顶部的基本信息
      infoList: [      // 顶部基本信息字段
        {
          type: 'input',
          id: 'code',
          isRequired: true,
          disabled: true,
          label: `${messages('setting.key820'/* 人员组代码*/)} :`
        },
        {
          type: 'input',
          id: 'name',
          isRequired: true,
          label: `${messages('setting.key823'/* 人员组名称*/)} :`
        },
        {
          type: 'input',
          id: 'comment',
          isRequired: true,
          label: `${messages('setting.key186'/* 描述*/)} :`
        },
        {
          type: 'switch',
          id: 'enabled',
          label: `${messages('common.column.status')} :`
        },
      ],
      // tabs标题
      tabs: [
        { key: 'PERSONADD', name: messages('setting.key314'/* 按人员添加*/) },
        { key: 'RULEADD', name: messages('setting.key825'/* 按照条件添加*/) },
      ],
      // 两个tab
      tabsData: {
        RULEADD: {},
        PERSONADD: {
          columns:
          [
            {
              title: messages('setting.key826'/* 名称*/),
              key: 'fullName',
              dataIndex: 'fullName',
            },
            {
              title: messages('setting.key827'/* 工号*/),
              key: 'employeeID',
              dataIndex: 'employeeID',
            },
            {
              title: messages('setting.key828'/* 部门*/),
              key: 'department',
              dataIndex: 'department',
              render: department => department ? department.name : ''
            },
            {
              title: messages('common.operation'),
              key: 'operation',
              render: (text, record) => (
                <span>
                  <Popconfirm
                    onConfirm={e => this.deleteUserFromGroup(e, record)}
                    title={messages('common.confirm.delete', { controlRule: record.controlRuleName })}>{/* 你确定要删除organizationName吗 */}
                    <a
                      href="#" onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                      }}>{messages('common.delete')}</a>
                  </Popconfirm>
                </span>)
            },
          ]

        },
      },
      personTableData: [], // 人员表格数据
      pagination: {
        total: 0
      },
      keywordUserName: '', // 搜索人员规则组下面的人
      page: 0,
      pageSize: 10,
      nowStatus: 'PERSONADD',
      conditionViewDTOS: [], // 规则组数据
      defaultConditionViewDTO: {
        isEditing: true, // 正在编辑的标志
        conditionDetails: [
          {
            conditionProperty: 'Department',
            conditionLogic: 'I',
            enabled: true,
            conditionValues: []
          },
          {
            conditionProperty: 'EmployeeRank',
            conditionLogic: 'I',
            enabled: true,
            conditionValues: []
          },
          {
            conditionProperty: 'EmployeeDuty',
            conditionLogic: 'I',
            enabled: true,
            conditionValues: []
          },
          {
            conditionProperty: 'EmployeeType',
            conditionLogic: 'I',
            enabled: true,
            conditionValues: []
          },
          {
            conditionProperty: 'EmployeePosition',
            conditionLogic: 'I',
            enabled: true,
            conditionValues: []
          }

        ]
      }, // 默认的一个规则，新增的时候，直接调用这个
      conditionCloneForCancel: false, // 点击编辑时，拷贝一份取消的时候用,一旦取消设置为false
      // 点击添加条件中的项目弹窗
      extraParams: {// 弹窗额外的参数
        excludeList: [],
        systemCustomEnumerationType: '', // systemCustomEnumerationType 代表类型，1001 type,1002 duty , 1008 级别
        status: ''
      },
      selectorItem: chooserData.personTypeModel, // 弹窗显示配置
      showListSelector: false, // 弹窗是否显示
      userGroupOID: ''// 人员组oid
    };
    // 正在编辑条件
    this.editingRule = {
      name: '', // 正在编辑条件里面项目名称：Department，EmployeeRank，EmployeeDuty，EmployeeType，EmployeePosition；其中user代表添加员工
      index: '',    // 正在编辑条件序号
      itemIndex: '' // 正在编辑条件里面项目序号
    };
  }

  componentDidMount() {
    this.setState({
      userGroupOID: this.props.params.oid
    });
    this.getGroupDetail();
    // 加载人员组下面的人
    this.getList(this.state.nowStatus);
  }

  deleteUserFromGroup = (e, record) => {
    const param = {
      userGroupOID: this.state.userGroupOID,
      userOIDs: [record.userOID]
    };
    PGService.deletePersonGroupPerson(param)
      .then(() => {
        this.getList(this.state.nowStatus);
      });
  }
  getGroupDetail = () => {
    // 根据路径上的oid,查出该条完整数据
    PGService.getPersonGroupDetail(this.props.params.oid)
      .then((response) => {
        // 根据code控制是否可以禁用
        const infoList = this.state.infoList;
        const infoData = response.data;
        infoList[0].disabled = (!!infoData.code);
        this.setState({
          infoData,
          infoList,
          conditionViewDTOS: response.data.conditionViewDTOS
        });
      });
  }

  getList = (key) => {
    if (key === 'PERSONADD') {
      const params = {
        page: this.state.page,
        size: this.state.pageSize,
        keyword: this.state.keywordUserName
      };
      PGService.getPersonGroupPersons(this.props.params.oid, params)
        .then((response) => {
          response.data.map((item, index) => {
            item.key = item.id ? item.id : index;
          });
          this.setState({
            personTableData: response.data,
            loading: false,
            pagination: {
              total: Number(response.headers['x-total-count']),
              onChange: this.onChangePager,
              current: this.state.page + 1
            }
          });
        })
        .catch((err) => {
          this.setState({
            loading: false
          });
        });
    }
  };

  onChangePager = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState({
        page: page - 1,
        loading: true,
      }, () => {
        this.getList(this.state.nowStatus);
      });
    }
  };
  /**
   * 选择是否包含
   * @param index    条件的序号
   * @param value    是否包含的标志
   * @param name     标题：部门、级别、类型、职务
   * @param i        条件中项目对应的序号
   */
  logicSelectChangeHandle = (index, value, name, i) => {
    this.state.conditionViewDTOS[index].conditionDetails[i].conditionLogic = value;
  }

  /**
   * 是否启用
   * @param index    条件的序号
   * @param value    是否包含的标志
   * @param name     标题：部门、级别、类型、职务
   * @param i        条件中项目对应的序号
   */
  onCheckboxChangeHandle = (index, i, value) => {
    const { conditionViewDTOS } = this.state;
    conditionViewDTOS[index].conditionDetails[i].enabled = value;
    this.setState({
      conditionViewDTOS
    });
  }
  /**
   * 移除一个条件项目
   * @param index    条件的序号
   * @param name     标题：部门、级别、类型、职务
   * @param valueIndex    移除的目标对象的序号
   * @param i        条件中项目对应的序号
   */
  removeTagByNameHandle = (index, name, valueIndex, i) => {
    const { conditionViewDTOS } = this.state;
    const list = conditionViewDTOS[index].conditionDetails[i].conditionValues;
    list[valueIndex].deleted = true;
    // list.splice(valueIndex, 1);
  }
  // 分为新增条件与修改条件
  confirmRuleHandle = (i) => {
    const { conditionViewDTOS, infoData } = this.state;
    if (this._checkCoditionIsEmpty(conditionViewDTOS[i])) {
      const pureCondition = this._deleteEmptyCondition(conditionViewDTOS[i]);
      if (!pureCondition.conditionSeq) {
        // 新增
        PGService.createPersonGroupRule(infoData.id, pureCondition)
          .then((res) => {
            conditionViewDTOS[i] = res.data;
            this.setState({
              conditionViewDTOS,
              loading: false
            });
          })
          .catch(() => {
            this.setState({
              loading: false
            });
          });
      } else {
        // 修改
        PGService.UpdatePersonGroupRule(infoData.id, pureCondition)
          .then((res) => {
            conditionViewDTOS[i] = res.data;
            this.setState({
              conditionViewDTOS,
              loading: false
            });
          })
          .catch((err) => {
            this.setState({
              loading: false
            });
          });
      }
    } else {
      // 请至少添加一个条件项目
      message.warning(messages('setting.key1724')/* 请至少添加一个条件项目*/);
    }
  }

  // 检测是否有正在编辑的规则
  checkHasEditing = () => {
    const { conditionViewDTOS } = this.state;
    for (let i = 0; i < conditionViewDTOS.length; i++) {
      if (conditionViewDTOS[i].isEditing === true) {
        return true;
      }
    }
    return false;
  }

  // 检查条件是不是空的
  _checkCoditionIsEmpty(condition) {
    let flag = false;
    for (let i = 0; i < condition.conditionDetails.length; i++) {
      if (condition.conditionDetails[i].conditionValues.length > 0) {
        for (let j = 0; j < condition.conditionDetails[i].conditionValues.length; j++) {
          if (!condition.conditionDetails[i].conditionValues[j].deleted) {
            flag = true;
            return flag;
          }
        }
      }
    }
    return flag;
  }

  // 上传的时候，把条件项为空的属性，删
  _deleteEmptyCondition(Condition) {
    const condition = deepCopy(Condition);
    const n = [];
    for (let i = 0; i < condition.conditionDetails.length; i++) {
      if (condition.conditionDetails[i].conditionValues.length > 0 || condition.conditionDetails[i].id) {
        if (condition.conditionDetails[i].enabled === undefined) {
          condition.conditionDetails[i].enabled = false;
        }
        const resV = this._removeDeletedValue(condition.conditionDetails[i].conditionValues);
        condition.conditionDetails[i].conditionValues = resV;
        n.push(condition.conditionDetails[i]);
      }
    }
    condition.conditionDetails = n;
    return condition;
  }
  _removeDeletedValue(conditionValues) {
    const n = [];
    if (conditionValues.length && conditionValues.length > 0) {
      for (let i = 0; i < conditionValues.length; i++) {
        if (!conditionValues[i].deleted) {
          n.push(conditionValues[i]);
        }
      }
    }
    return n;
  }

  /**
   * 显示弹窗添加条件中项目
   * @param index    条件的序号
   * @param name    标题：部门、级别、类型、职务
   * @param i    条件中项目对应的序号
   */
  showConditionSelectorHandle = (index, name, itemIndex) => {
    this.editingRule.index = index;
    this.editingRule.itemIndex = itemIndex;
    this.editingRule.name = name;
    if (name !== 'EmployeePosition') {
      const { extraParams, conditionViewDTOS } = this.state;
      const list = conditionViewDTOS[this.editingRule.index].conditionDetails[this.editingRule.itemIndex].conditionValues;
      extraParams.excludeList = this._getExcludeList(list);
      if (name === 'EmployeeDuty') {
        const selectorItem = chooserData.personDutyModel;
        extraParams.systemCustomEnumerationType = '1002';
        extraParams.status = null;
        this.setState({
          selectorItem,
          extraParams
        });
      } else if (name === 'EmployeeType') {
        const selectorItem = chooserData.personTypeModel;
        extraParams.systemCustomEnumerationType = '1001';
        extraParams.status = null;
        this.setState({
          selectorItem,
          extraParams
        });
      } else if (name === 'EmployeeRank') {
        const selectorItem = chooserData.personRankModel;
        extraParams.systemCustomEnumerationType = '1008';
        extraParams.status = null;
        this.setState({
          selectorItem,
          extraParams
        });
      } else if (name === 'Department') {
        // let selectorItem = chooserData['department'];
        const selectorItem = chooserData.selfGetter('department');
        extraParams.systemCustomEnumerationType = '';
        extraParams.status = null;
        this.setState({
          selectorItem,
          extraParams
        });
      } else if (name === 'Company') {
        const selectorItem = chooserData.available_company;
        extraParams.systemCustomEnumerationType = '';
        extraParams.status = null;
        this.setState({
          selectorItem,
          extraParams
        });
      }
      this.setState({ showListSelector: true });
    }


  }
  // 处理条件添加弹框点击ok,添加值
  handleListOk = (result) => {
    const arr = result.result;
    if (this.editingRule.name === 'Department') {
      this._afterSelectDepartment(arr);
    } else if (this.editingRule.name === 'Company') {
      this._afterSelectCompany(arr);
    } else if (this.editingRule.name === 'EmployeeDuty' ||
      this.editingRule.name === 'EmployeeRank' ||
      this.editingRule.name === 'EmployeeType') {
      this._setConditionDetailsArr(arr);
    } else if (this.editingRule.name === 'EmployeePosition') {
      const { conditionViewDTOS } = this.state;
      const temp = result.map((item) => {
        const obj = {};
        obj.conditionValue = item;
        obj.description = item;
        return obj;
      });
      const allCondition = conditionViewDTOS[this.editingRule.index]
        .conditionDetails[this.editingRule.itemIndex].conditionValues.concat(temp);
      conditionViewDTOS[this.editingRule.index]
        .conditionDetails[this.editingRule.itemIndex].conditionValues = uniquelizeArray(allCondition, 'conditionValue');
    } else {
      this.addUserToGroup(arr);
    }
    // 关闭弹窗
    this.handleCancel();
  };

  addUserToGroup(arr) {
    const users = [];
    arr.map((item) => {
      users.push(item.userOID);
    });
    const param = {
      userGroupOID: this.state.userGroupOID,
      userOIDs: users
    };
    PGService.addPersonGroupPerson(param)
      .then(() => {
        this.getList(this.state.nowStatus);
      });
  }

  // 通过条件项目名字与新增的条件项目，设置条件项目
  // 只适用于值列表
  _setConditionDetailsArr(arr) {
    const { conditionViewDTOS } = this.state;
    const cArr = [];
    for (let i = 0; i < arr.length; i++) {
      const item = {
        conditionValue: arr[i].value,
        description: arr[i].messageKey
      };
      cArr.push(item);
    }
    const allCondition = conditionViewDTOS[this.editingRule.index]
      .conditionDetails[this.editingRule.itemIndex].conditionValues.concat(cArr);
    conditionViewDTOS[this.editingRule.index]
      .conditionDetails[this.editingRule.itemIndex].conditionValues = uniquelizeArray(allCondition, 'conditionValue');
  }

  // 通过条件项目名字与新增的条件项目，设置条件项目
  // 只适用于部门
  _afterSelectDepartment(arr) {
    const { conditionViewDTOS } = this.state;
    const cArr = [];
    for (let i = 0; i < arr.length; i++) {
      const item = {
        conditionValue: arr[i].departmentId,
        description: arr[i].name
      };
      cArr.push(item);
    }
    const allCondition = conditionViewDTOS[this.editingRule.index]
      .conditionDetails[this.editingRule.itemIndex].conditionValues.concat(cArr);
    conditionViewDTOS[this.editingRule.index]
      .conditionDetails[this.editingRule.itemIndex].conditionValues = uniquelizeArray(allCondition, 'conditionValue');
  }
  // 通过条件项目名字与新增的条件项目，设置条件项目
  // 只适用于公司
  _afterSelectCompany(arr) {
    const { conditionViewDTOS } = this.state;
    const cArr = [];
    for (let i = 0; i < arr.length; i++) {
      const item = {
        conditionValue: arr[i].id,
        description: arr[i].name
      };
      cArr.push(item);
    }
    const allCondition = conditionViewDTOS[this.editingRule.index]
      .conditionDetails[this.editingRule.itemIndex].conditionValues.concat(cArr);
    conditionViewDTOS[this.editingRule.index]
      .conditionDetails[this.editingRule.itemIndex].conditionValues = uniquelizeArray(allCondition, 'conditionValue');
  }

  // 排除这些已经选择的条件项
  _getExcludeList(list) {
    const arr = [];
    if (list && list.length && list.length > 0) {
      for (let i = 0; i < list.length; i++) {
        arr.push(list[i].conditionValue);
      }
    }
    return arr;
  }

  // 点击编辑
  editRuleHandle = (i) => {
    const { conditionViewDTOS } = this.state;
    // 这里只做单个编辑，因为有取消操作，每一个编辑状态的条件都需要保存一份数据
    if (this.checkHasEditing()) {
      Modal.warning({
        title: messages('setting.key829'/* 提示*/),
        content: messages('setting.key830'/* 请先保存正在编辑的条件*/),
      });
    } else {
      const conditionCloneForCancel = deepCopy(conditionViewDTOS[i]);
      conditionViewDTOS[i].isEditing = true;
      this.setState({
        conditionViewDTOS,
        conditionCloneForCancel
      });
    }
  }

  // 点击取消编辑
  cancelRuleHandle = (i) => {
    const { conditionCloneForCancel, conditionViewDTOS } = this.state;
    if (!conditionCloneForCancel) {
      // 如果是新增
      conditionViewDTOS.splice(i, 1);
    } else {
      conditionViewDTOS[i] = conditionCloneForCancel;
      this.state.conditionCloneForCancel = false;
    }
    const _this = this;
    confirm({
      title: messages('setting.key829'/* 提示*/),
      content: messages('common.confirm.cancel'),
      onOk() {
        // 把克隆的数据重新渲染
        _this.setState({
          conditionViewDTOS
        });
      },
      onCancel() {
      },
    });
  }
  deleteRuleHandle = (i) => {
    const { conditionViewDTOS, infoData } = this.state;
    const _this = this;
    confirm({
      title: messages('setting.key829'/* 提示*/),
      content: messages('common.confirm.delete'),
      onOk() {
        PGService.deletePersonGroupRule(infoData.id, conditionViewDTOS[i].conditionSeq)
          .then((res) => {
            _this.setState({ loading: false });
            conditionViewDTOS.splice(i, 1);
            _this.setState({
              loading: false,
              conditionViewDTOS
            });
          }).catch((e) => {
            _this.setState({ loading: false });
          });
      },
      onCancel() { },
    });
  }

  // 渲染规则条件
  renderConditon = (condition) => {
    const domConditon = [];
    for (let i = 0; i < condition.length; i++) {
      domConditon.push(
        <RuleInfo
          key={i}
          index={i}
          tenantMode={this.props.tenantMode}
          condition={condition[i]}
          setInputsValue={this.handleListOk}
          confirmHandle={this.confirmRuleHandle}
          cancelHandle={this.cancelRuleHandle}
          editHandle={this.editRuleHandle}
          removeTagByNameHandle={this.removeTagByNameHandle}
          logicSelectChangeHandle={this.logicSelectChangeHandle}
          onCheckboxChangeHandle={this.onCheckboxChangeHandle}
          showConditionSelectorHandle={this.showConditionSelectorHandle}
          deleteHandle={this.deleteRuleHandle} />
      );
    }
    return domConditon;
  }

  // 添加条件
  addConditon = () => {
    // 这里只做单个编辑，因为有取消操作，每一个编辑状态的条件都需要保存一份数据
    if (this.checkHasEditing()) {
      Modal.warning({
        title: messages('setting.key829'/* 提示*/),
        content: messages('setting.key830'/* 请先保存正在编辑的条件*/),
      });
    } else {
      const { conditionViewDTOS } = this.state;
      const defaultConditionViewDTO = deepCopy(this.state.defaultConditionViewDTO);
      if (this.props.tenantMode) {
        // 如果是租户模式
        const com = {
          conditionProperty: 'Company',
          conditionLogic: 'I',
          enabled: true,
          conditionValues: []
        };
        defaultConditionViewDTO.conditionDetails.push(com);
      }
      conditionViewDTOS.push(deepCopy(defaultConditionViewDTO));
      this.setState({
        defaultConditionViewDTO
      });
    }
  }
  // 搜索成本中心项的人
  emitEmptyForDep = () => {
    this.userNameInput.focus();
    this.setState({ keywordUserName: '' }, () => {
      this.onChangeUserName();
    });
  }
  // 搜索成本中心项的人
  onChangeUserName = (e) => {
    let keywordUserName = '';
    if (e) {
      keywordUserName = e.target.value;
    }
    this.setState({
      keywordUserName,
      loading: true,
      page: 0,
    }, () => {
      // 搜索
      this.getList(this.state.nowStatus);
    });
  }
  // 渲染Tabs
  renderTabs = () => {
    const { tabsData, loading, pagination, nowStatus, personTableData, conditionViewDTOS } = this.state;
    return (
      this.state.tabs.map((tab) => {
        if (tab.key === 'PERSONADD') {
          return (<TabPane tab={tab.name} key={tab.key}>
            <div className="table-header">
              {this.renderButton()}
            </div>
            <ResizeTable
              columns={tabsData[nowStatus].columns}
              dataSource={personTableData}
              pagination={pagination}
              loading={loading}
              bordered
              size="middle"
              rowKey={reCode => reCode.userOID}
            />
          </TabPane>);
        } else if (tab.key === 'RULEADD') {
          return (<TabPane tab={tab.name} key={tab.key}>
            <div className="condition-rule-wrap">
              <div className="condition-rule-icon-tips">
                <Icon type="info-circle" className="default-color-font" />
                <span className="tips-text">
                  {messages('setting.key831'/* 单个条件内为且的关系，多个条件间为或的关系*/)}
                </span>
              </div>
              {this.renderConditon(conditionViewDTOS)}
              <div className="rule-add-btn" onClick={e => this.addConditon(e)}>
                {messages('setting.key832'/* 添加条件 +*/)}
              </div>
            </div>
          </TabPane>);
        }
      })
    );
  }
  // 点击
  onChangeTabs = (key) => {
    this.setState({
      nowStatus: key,
      loading: true,
      personTableData: [],
      pagination: {
        total: 0
      },
      page: 0
    }, () => {
      this.getList(key);
    });
  };

  // 添加人员
  handleNew = () => {
    this.editingRule.name = 'user';
    const selectorItem = chooserData.user;
    this.setState({
      selectorItem,
      extraParams: {// 弹窗额外的参数
        excludeList: [],
        systemCustomEnumerationType: '', // systemCustomEnumerationType 代表类型，1001 type,1002 duty , 1008 级别
        status: 'all'
      },
    });
    this.setState({ showListSelector: true });
  };

  // 渲染按钮
  // 按人员添加
  renderButton = () => {
    const suffix = this.state.keywordUserName ? <Icon type="close-circle" onClick={this.emitEmptyForDep} /> : null;
    const { saving, pagination } = this.state;
    const groupId = this.props.params.id;
    if (this.state.nowStatus === 'PERSONADD') {
      return (
        <div>
          <div className="table-header-title">
            {messages('common.total', { total: `${pagination.total || 0}` })/* 共搜索到 {total} 条数据*/}
          </div>
          <div className="table-header-buttons">
            <div className="f-left">
              <Button
                type="primary" onClick={this.handleNew}
                loading={saving}>
                {messages('common.add')}
              </Button>
              {/* todo 还得更改接口*/}
              <ImportModal
                hasErrInfo
                buttonName={messages('setting.key2200')/* 人员导入*/}
                uploadUrl={`${config.baseUrl}/api/user/group/users/import?groupId=${groupId}`}
                showErrUrl={`${config.baseUrl}` + '/api/batch/transaction/logs/v2/${transactionOID}'}
                exportErrUrl={`${config.baseUrl}` + '/api/batch/transaction/logs/failed/export/group/user/${transactionOID}'}
                onCancel={this.getPersonList}
                onGetList={() => this.getList(this.state.nowStatus)}
                templates={[{
                  downloadName: messages('setting.key2201')/* 人员信息模板-点击下载*/,
                  templateName: messages('setting.key2202')/* 人员信息导入模板*/,
                  downloadUrl: '/api/user/group/users/template/download',
                  downloading: 'userLoading'
                }]}
              />

            </div>
            <div className="table-header-inp f-right">
              <Input
                className="rule-user-name-search"
                key={'rule-UserName-search'}
                placeholder={messages('setting.key333'/* 输入姓名或工号*/)}
                prefix={<Icon type="search" className="font-disabled" />}
                suffix={suffix}
                value={this.state.keywordUserName}
                onChange={this.onChangeUserName}
                ref={node => this.userNameInput = node}
              />
            </div>
            <div className="clear" />
          </div>
        </div>
      );
    }
  }
  // 顶部信息：保存所做的详情修改
  handleUpdate = (value) => {
    const { infoData } = this.state;
    value.id = infoData.id;
    value.userGroupOID = infoData.userGroupOID;
    console.log(value);
    PGService.UpdatePersonGroup(value)
      .then((response) => {
        this.setState({
          infoData: response.data,
          edit: true
        });
      });

  };
  // 顶部信息：控制是否编辑
  handleEdit = (flag) => {
    this.setState({ edit: flag });
  };
  // 控制是否弹出条件添加弹窗
  handleCancel = () => {
    this.setState({ showListSelector: false, saving: false });
  };
  handleBack = () => {
    this.context.router.push(menuRoute.getMenuItemByAttr('person-group', 'key').url);
  };
  render() {
    const { edit, infoList, infoData, extraParams, selectorItem, showListSelector } = this.state;
    return (
      <div className="person-group-detail">
        <BasicInfo
          infoList={infoList}
          infoData={infoData}
          isHideEditBtn
          updateHandle={this.handleUpdate}
          updateState={edit} />
        <Tabs onChange={this.onChangeTabs} style={{ marginTop: 20 }}>
          {this.renderTabs()}
        </Tabs>
        <ListSelector
          visible={showListSelector}
          onOk={this.handleListOk}
          onCancel={this.handleCancel}
          extraParams={extraParams}
          selectorItem={selectorItem}
        />
        <a style={{ fontSize: '14px', paddingBottom: '20px' }} onClick={this.handleBack}>
          <Icon type="rollback" style={{ marginRight: '5px' }} />
          {messages('common.back')}
        </a>
      </div>
    );
  }
}

PersonGroupDetail.contextTypes = {
  router: React.PropTypes.object
};


function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode,
    company: state.login.company,
  };
}
export default connect(mapStateToProps)(PersonGroupDetail);

